<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<!-- 	<view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-content">
				<view class="back-icon" @click="goBack">
					<image src="/static/back.png" mode="aspectFit"></image>
				</view>
				<text class="title">立即预约</text>
			</view>
		</view> -->

		<!-- 维修方式 -->
		<view class="section">
			<view class="section-title">
				<view class="title-icon">🚗</view>
				<text>维修方式</text>
			</view>
			<view class="radio-group">
				<radio-group @change="changeRepairType" class="radio-flex">
					<label class="radio-item" :class="form.repairType === 'store' ? 'selected' : ''">
						<view class="radio-content">
							<view class="radio-icon">🏪</view>
							<text>到店维修</text>
						</view>
						<radio value="store" :checked="form.repairType === 'store'" />
					</label>
					<label class="radio-item" :class="form.repairType === 'pickup' ? 'selected' : ''">
						<view class="radio-content">
							<view class="radio-icon">🚚</view>
							<text>上门取车</text>
						</view>
						<radio value="pickup" :checked="form.repairType === 'pickup'" />
					</label>
				</radio-group>
			</view>
		</view>

		<!-- 客户信息 -->
		<view class="section">
			<view class="section-title">
				<view class="title-icon">👤</view>
				<text>客户信息</text>
			</view>
			<view class="form-item">
				<text class="label">车主姓名</text>
				<input class="input" v-model="form.ownerName" placeholder="请输入车主姓名" />
			</view>
			<view class="form-item">
				<text class="label">联系方式</text>
				<input class="input" v-model="form.contact" placeholder="请输入联系方式" type="number" />
			</view>
			<view class="form-item">
				<text class="label">预约时间</text>
				<picker mode="datetime" @change="onTimeChange" class="picker">
					<view class="input">{{ form.appointmentTime || '请选择预约时间' }}</view>
				</picker>
			</view>
			<!-- 仅在上门取车时显示 -->
			<view class="form-item" v-if="form.repairType === 'pickup'">
				<text class="label">取车位置</text>
				<input class="input" v-model="form.pickupLocation" placeholder="请输入取车位置" />
			</view>
		</view>

		<!-- 车辆信息 -->
		<view class="section">
			<view class="section-title">
				<view class="title-icon">🚙</view>
				<text>车辆信息</text>
			</view>
			<view class="form-item">
				<text class="label">车辆类型</text>
				<picker mode="selector" :range="carTypes" @change="onCarTypeChange" class="picker">
					<view class="input">{{ form.carType || '请选择' }}</view>
				</picker>
			</view>
			<view class="form-item">
				<text class="label">车牌号</text>
				<input class="input" v-model="form.plateNumber" placeholder="请输入车牌号" />
			</view>
		</view>

		<!-- 照片上传 -->
		<view class="section">
			<view class="section-title">
				<view class="title-icon">📷</view>
				<text>照片上传</text>
			</view>
			<view class="photo-item">
				<view class="photo-label">
					<view class="photo-icon">🚗</view>
					<text>整车照片</text>
				</view>
				<view class="upload-area" @click="uploadPhoto('carPhoto')">
					<view v-if="!form.carPhoto" class="upload-placeholder">
						<view class="upload-icon">📷</view>
						<text>点击上传整车照片</text>
					</view>
					<image v-else :src="form.carPhoto" class="preview-img" mode="aspectFill"></image>
				</view>
			</view>
			<view class="photo-item">
				<view class="photo-label">
					<view class="photo-icon">🔧</view>
					<text>维修部位照片</text>
				</view>
				<view class="upload-area" @click="uploadPhoto('repairPhoto')">
					<view v-if="!form.repairPhoto" class="upload-placeholder">
						<view class="upload-icon">📷</view>
						<text>点击上传维修部位照片</text>
					</view>
					<image v-else :src="form.repairPhoto" class="preview-img" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-section">
			<button class="submit-btn" @click="submitForm">
				<view class="btn-content">
					<text>提交预约</text>
					<view class="btn-icon">→</view>
				</view>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 20,
				form: {
					repairType: "store", // 默认到店维修
					ownerName: "",
					contact: "",
					appointmentTime: "",
					pickupLocation: "", // 仅上门取车用
					carType: "",
					plateNumber: "",
					carPhoto: "",
					repairPhoto: ""
				},
				carTypes: ["轿车", "SUV", "面包车", "卡车"]
			};
		},
		onLoad() {
			// 获取系统信息，计算状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
		},
		methods: {
			changeRepairType(e) {
				this.form.repairType = e.detail.value;
				if (this.form.repairType === 'store') {
					this.form.pickupLocation = '';
				}
			},
			onCarTypeChange(e) {
				this.form.carType = this.carTypes[e.detail.value];
			},
			onTimeChange(e) {
				const date = new Date(e.detail.value);
				// 格式化日期时间显示
				this.form.appointmentTime =
					`${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
			},
			uploadPhoto(type) {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.form[type] = res.tempFilePaths[0];
					}
				});
			},
			submitForm() {
				// 简单的表单验证
				// if (!this.form.ownerName) {
				// 	return uni.showToast({
				// 		title: '请输入车主姓名',
				// 		icon: 'none'
				// 	});
				// }
				// if (!this.form.contact || this.form.contact.length !== 11) {
				// 	return uni.showToast({
				// 		title: '请输入正确的手机号',
				// 		icon: 'none'
				// 	});
				// }
				// if (!this.form.appointmentTime) {
				// 	return uni.showToast({
				// 		title: '请选择预约时间',
				// 		icon: 'none'
				// 	});
				// }
				// if (this.form.repairType === 'pickup' && !this.form.pickupLocation) {
				// 	return uni.showToast({
				// 		title: '请输入取车位置',
				// 		icon: 'none'
				// 	});
				// }
				// if (!this.form.carType) {
				// 	return uni.showToast({
				// 		title: '请选择车辆类型',
				// 		icon: 'none'
				// 	});
				// }
				// if (!this.form.plateNumber) {
				// 	return uni.showToast({
				// 		title: '请输入车牌号',
				// 		icon: 'none'
				// 	});
				// }

				console.log("提交数据:", this.form);
				uni.showToast({
					title: "提交成功",
					icon: "success"
				});
				uni.redirectTo({
					url: '/pages/car-repair-model/appointmentsuccess/appointmentsuccess'
				});
			},
			goBack() {
				uni.navigateBack();
			}
		}
	};
</script>

<style>
	/* 基础样式 */
	.container {
		background: linear-gradient(180deg, #f7f9fc 0%, #f0f4ff 100%);
		min-height: 100vh;
	}

	/* 自定义导航栏 */
	.custom-nav {
		background: linear-gradient(90deg, #2a8cff 0%, #5aa9ff 100%);
		color: #fff;
		box-sizing: border-box;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
	}

	.nav-content {
		display: flex;
		align-items: center;
		height: 88rpx;
		padding: 0 20rpx;
		gap: 16rpx;
	}

	.back-icon {
		width: 64rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.18);
		transition: transform 0.15s ease, background 0.2s ease;
	}

	.back-icon:active {
		transform: scale(0.96);
		background: rgba(255, 255, 255, 0.28);
	}

	.back-icon image {
		width: 40rpx;
		height: 40rpx;
		filter: drop-shadow(0 2rpx 2rpx rgba(0, 0, 0, 0.1));
	}

	.title {
		flex: 1;
		text-align: center;
		font-size: 34rpx;
		font-weight: 700;
		letter-spacing: 1rpx;
		color: #fff;
		text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.15);
	}

	/* 表单区块样式 */
	.section {
		background: #ffffff;
		margin: 24rpx 20rpx 12rpx;
		padding: 32rpx;
		border-radius: 24rpx;
		box-shadow: 0 10rpx 28rpx rgba(0, 0, 0, 0.06);
		border: 1rpx solid rgba(0, 0, 0, 0.04);
	}

	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 32rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: #1f2d3d;
	}

	.title-icon {
		font-size: 28rpx;
		margin-right: 12rpx;
	}

	/* 单选按钮组样式 */
	.radio-group {
		padding: 16rpx 0;
	}

	.radio-flex {
		display: flex;
		gap: 20rpx;
		width: 100%;
	}

	.radio-item {
		flex: 1;
		border-radius: 20rpx;
		border: 2rpx solid #e8ecf0;
		background: #fafbfc;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}

	.radio-item.selected {
		border-color: #2a8cff;
		background: linear-gradient(135deg, rgba(42, 140, 255, 0.08) 0%, rgba(42, 140, 255, 0.12) 100%);
		box-shadow: 0 4rpx 12rpx rgba(42, 140, 255, 0.15);
	}

	.radio-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 24rpx 16rpx;
		position: relative;
	}

	.radio-icon {
		font-size: 32rpx;
		margin-bottom: 8rpx;
	}

	.radio-item text {
		font-size: 28rpx;
		color: #6b7a90;
		font-weight: 500;
	}

	.radio-item.selected text {
		color: #2a8cff;
		font-weight: 600;
	}

	.radio-item radio {
		position: absolute;
		top: 12rpx;
		right: 12rpx;
		opacity: 0.7;
	}

	/* 表单项目样式 */
	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 32rpx;
		padding: 8rpx 0;
	}

	.label {
		width: 180rpx;
		font-size: 28rpx;
		color: #6b7a90;
		font-weight: 500;
		margin-right: 24rpx;
	}

	.input {
		flex: 1;
		padding: 24rpx 28rpx;
		border: 2rpx solid #e8ecf0;
		border-radius: 16rpx;
		background: #fafbfc;
		font-size: 28rpx;
		color: #1f2d3d;
		transition: all 0.3s ease;
	}

	.input:focus {
		border-color: #2a8cff;
		background-color: #fff;
		box-shadow: 0 0 0 6rpx rgba(42, 140, 255, 0.1);
	}

	.picker {
		flex: 1;
	}

	/* 照片上传区域 */
	.photo-item {
		margin: 32rpx 0;
		display: flex;
		flex-direction: column;
	}

	.photo-label {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		color: #6b7a90;
		font-weight: 500;
	}

	.photo-icon {
		font-size: 24rpx;
		margin-right: 12rpx;
	}

	.upload-area {
		width: 100%;
		border: 2rpx dashed #d1d9e0;
		border-radius: 20rpx;
		background: #fafbfc;
		transition: all 0.3s ease;
		overflow: hidden;
	}

	.upload-area:active {
		border-color: #2a8cff;
		background: rgba(42, 140, 255, 0.05);
	}

	.upload-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60rpx 20rpx;
		color: #9ca3af;
	}

	.upload-icon {
		font-size: 48rpx;
		margin-bottom: 16rpx;
		opacity: 0.6;
	}

	.upload-placeholder text {
		font-size: 26rpx;
		color: #9ca3af;
	}

	.preview-img {
		width: 100%;
		height: 300rpx;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	/* 提交按钮区域 */
	.submit-section {
		margin: 40rpx 20rpx 60rpx;
		padding: 0 8rpx;
	}

	.submit-btn {
		width: 100%;
		background: linear-gradient(90deg, #2a8cff 0%, #1c6bff 100%);
		color: #ffffff;
		border-radius: 38rpx;
		border: none;
		box-shadow: 0 12rpx 24rpx rgba(42, 140, 255, 0.32);
		transition: all 0.3s ease;
		overflow: hidden;
		position: relative;
	}

	.submit-btn:active {
		transform: translateY(2rpx) scale(0.98);
		box-shadow: 0 8rpx 16rpx rgba(42, 140, 255, 0.28);
	}

	.btn-content {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		padding: 28rpx 0;
		font-size: 32rpx;
		font-weight: 600;
		letter-spacing: 1rpx;
	}

	.btn-icon {
		font-size: 28rpx;
		font-weight: bold;
		transition: transform 0.3s ease;
	}

	.submit-btn:active .btn-icon {
		transform: translateX(4rpx);
	}
</style>